<template>
  <div class="resource-status-display">
    <a-card title="资源状态" :bordered="false" size="small">
      <a-row :gutter="16">
        <!-- 生命周期状态 -->
        <a-col :span="6">
          <div class="status-card">
            <div class="status-label">生命周期</div>
            <div class="status-value">
              <a-tag :color="getLifecycleColor(status.lifecycle)">
                {{ getLifecycleLabel(status.lifecycle) }}
              </a-tag>
            </div>
          </div>
        </a-col>

        <!-- 可用性状态 -->
        <a-col :span="6">
          <div class="status-card">
            <div class="status-label">可用性</div>
            <div class="status-value">
              <a-tag :color="getAvailabilityColor(status.availability)">
                {{ getAvailabilityLabel(status.availability) }}
              </a-tag>
            </div>
          </div>
        </a-col>

        <!-- 版本状态 -->
        <a-col :span="6">
          <div class="status-card">
            <div class="status-label">版本</div>
            <div class="status-value">
              <a-tag :color="getVersionColor(status.version)">
                {{ getVersionLabel(status.version) }}
              </a-tag>
            </div>
          </div>
        </a-col>

        <!-- 自定义状态 -->
        <a-col :span="6">
          <div class="status-card">
            <div class="status-label">业务状态</div>
            <div class="status-value">
              <a-tag
                v-if="status.custom"
                :color="getCustomColor(status.custom.statusCode)"
              >
                {{ status.custom.statusName }}
              </a-tag>
              <a-tag v-else color="default">未设置</a-tag>
            </div>
          </div>
        </a-col>
      </a-row>

      <!-- 状态操作按钮 -->
      <div class="status-actions">
        <a-space>
          <a-button type="primary" size="small" @click="showStatusModal = true">
            <template #icon>
              <Icon icon="ant-design:setting-outlined" />
            </template>
            状态管理
          </a-button>
          <a-button size="small" @click="showHistory = true">
            <template #icon>
              <Icon icon="ant-design:history-outlined" />
            </template>
            状态历史
          </a-button>
        </a-space>
      </div>
    </a-card>

    <!-- 状态管理模态框 -->
    <a-modal
      :open="showStatusModal"
      title="状态管理"
      width="800px"
      @cancel="showStatusModal = false"
    >
      <div class="status-management-content">
        <a-tabs>
          <a-tab-pane key="lifecycle" tab="生命周期状态">
            <div class="status-options">
              <a-radio-group
                v-model:value="selectedLifecycle"
                @change="updateLifecycle"
              >
                <a-radio-button value="DRAFT">草稿</a-radio-button>
                <a-radio-button value="ACTIVE">活跃</a-radio-button>
                <a-radio-button value="SUSPENDED">暂停</a-radio-button>
                <a-radio-button value="ARCHIVED">归档</a-radio-button>
              </a-radio-group>
            </div>
          </a-tab-pane>

          <a-tab-pane key="availability" tab="可用性状态">
            <div class="status-options">
              <a-radio-group
                v-model:value="selectedAvailability"
                @change="updateAvailability"
              >
                <a-radio-button value="AVAILABLE">可用</a-radio-button>
                <a-radio-button value="RESERVED">已预订</a-radio-button>
                <a-radio-button value="IN_USE">使用中</a-radio-button>
                <a-radio-button value="UNAVAILABLE">不可用</a-radio-button>
                <a-radio-button value="FAILED">故障</a-radio-button>
              </a-radio-group>
            </div>
          </a-tab-pane>

          <a-tab-pane key="custom" tab="自定义状态">
            <div class="status-options">
              <a-radio-group
                v-model:value="selectedCustom"
                @change="updateCustom"
              >
                <a-radio-button value="PENDING_REVIEW">待审核</a-radio-button>
                <a-radio-button value="APPROVED">已审核</a-radio-button>
                <a-radio-button value="REJECTED">已拒绝</a-radio-button>
                <a-radio-button value="ACTIVE">已激活</a-radio-button>
                <a-radio-button value="SUSPENDED">已暂停</a-radio-button>
                <a-radio-button value="ARCHIVED">已归档</a-radio-button>
              </a-radio-group>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-modal>

    <!-- 状态历史模态框 -->
    <a-modal
      :open="showHistory"
      title="状态变更历史"
      width="600px"
      @cancel="showHistory = false"
    >
      <a-timeline>
        <a-timeline-item
          v-for="(history, index) in statusHistory"
          :key="index"
          :color="getHistoryColor(history.statusType)"
        >
          <div class="history-item">
            <div class="history-header">
              <span class="history-type">{{
                getHistoryTypeLabel(history.statusType)
              }}</span>
              <span class="history-time">{{
                formatTime(history.timestamp)
              }}</span>
            </div>
            <div class="history-content">
              <a-tag size="small">{{ history.oldStatus }}</a-tag>
              <IconifyIcon icon="ant-design:arrow-right-outlined" />
              <a-tag size="small" color="blue">{{ history.newStatus }}</a-tag>
            </div>
            <div v-if="history.reason" class="history-reason">
              原因：{{ history.reason }}
            </div>
          </div>
        </a-timeline-item>
      </a-timeline>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { IconifyIcon } from '@vben/icons';

// Props
interface Props {
  resourceId: string;
  resourceType: string;
}

const props = defineProps<Props>();

// 响应式数据
const showStatusModal = ref(false);
const showHistory = ref(false);
const selectedLifecycle = ref('');
const selectedAvailability = ref('');
const selectedCustom = ref('');

// 状态数据
const status = reactive({
  lifecycle: 'ACTIVE',
  availability: 'AVAILABLE',
  version: 'ACTIVE',
  custom: {
    statusCode: 'APPROVED',
    statusName: '已审核',
  },
});

// 状态历史数据
const statusHistory = ref([
  {
    id: '1',
    statusType: 'LIFECYCLE',
    oldStatus: 'DRAFT',
    newStatus: 'ACTIVE',
    reason: '资源初始化完成',
    timestamp: new Date(Date.now() - 86400000),
  },
  {
    id: '2',
    statusType: 'AVAILABILITY',
    oldStatus: 'UNAVAILABLE',
    newStatus: 'AVAILABLE',
    reason: '系统维护完成',
    timestamp: new Date(Date.now() - 3600000),
  },
  {
    id: '3',
    statusType: 'CUSTOM',
    oldStatus: 'PENDING_REVIEW',
    newStatus: 'APPROVED',
    reason: '审核通过',
    timestamp: new Date(Date.now() - 1800000),
  },
]);

// 方法
const getLifecycleColor = (lifecycle: string) => {
  const colors: Record<string, string> = {
    DRAFT: 'default',
    ACTIVE: 'green',
    SUSPENDED: 'orange',
    ARCHIVED: 'red',
  };
  return colors[lifecycle] || 'default';
};

const getLifecycleLabel = (lifecycle: string) => {
  const labels: Record<string, string> = {
    DRAFT: '草稿',
    ACTIVE: '活跃',
    SUSPENDED: '暂停',
    ARCHIVED: '归档',
  };
  return labels[lifecycle] || lifecycle;
};

const getAvailabilityColor = (availability: string) => {
  const colors: Record<string, string> = {
    AVAILABLE: 'green',
    RESERVED: 'blue',
    IN_USE: 'orange',
    UNAVAILABLE: 'red',
    FAILED: 'red',
  };
  return colors[availability] || 'default';
};

const getAvailabilityLabel = (availability: string) => {
  const labels: Record<string, string> = {
    AVAILABLE: '可用',
    RESERVED: '已预订',
    IN_USE: '使用中',
    UNAVAILABLE: '不可用',
    FAILED: '故障',
  };
  return labels[availability] || availability;
};

const getVersionColor = (version: string) => {
  const colors: Record<string, string> = {
    DRAFT: 'default',
    STAGED: 'blue',
    CANARY: 'orange',
    ACTIVE: 'green',
    DEPRECATED: 'red',
    ROLLED_BACK: 'red',
  };
  return colors[version] || 'default';
};

const getVersionLabel = (version: string) => {
  const labels: Record<string, string> = {
    DRAFT: '草稿',
    STAGED: '已暂存',
    CANARY: '金丝雀',
    ACTIVE: '活跃',
    DEPRECATED: '已废弃',
    ROLLED_BACK: '已回滚',
  };
  return labels[version] || version;
};

const getCustomColor = (statusCode: string) => {
  const colors: Record<string, string> = {
    PENDING_REVIEW: 'orange',
    APPROVED: 'green',
    REJECTED: 'red',
    ACTIVE: 'blue',
    SUSPENDED: 'purple',
    ARCHIVED: 'default',
  };
  return colors[statusCode] || 'default';
};

const getHistoryColor = (statusType: string) => {
  const colors: Record<string, string> = {
    LIFECYCLE: 'blue',
    AVAILABILITY: 'green',
    VERSION: 'orange',
    CUSTOM: 'purple',
  };
  return colors[statusType] || 'default';
};

const getHistoryTypeLabel = (statusType: string) => {
  const labels: Record<string, string> = {
    LIFECYCLE: '生命周期',
    AVAILABILITY: '可用性',
    VERSION: '版本',
    CUSTOM: '自定义',
  };
  return labels[statusType] || statusType;
};

const formatTime = (timestamp: Date) => {
  return timestamp.toLocaleString('zh-CN');
};

const updateLifecycle = (value: string) => {
  status.lifecycle = value;
  message.success('生命周期状态更新成功');
};

const updateAvailability = (value: string) => {
  status.availability = value;
  message.success('可用性状态更新成功');
};

const updateCustom = (value: string) => {
  const customLabels: Record<string, string> = {
    PENDING_REVIEW: '待审核',
    APPROVED: '已审核',
    REJECTED: '已拒绝',
    ACTIVE: '已激活',
    SUSPENDED: '已暂停',
    ARCHIVED: '已归档',
  };

  status.custom = {
    statusCode: value,
    statusName: customLabels[value] || value,
  };
  message.success('自定义状态更新成功');
};

// 初始化
onMounted(() => {
  selectedLifecycle.value = status.lifecycle;
  selectedAvailability.value = status.availability;
  selectedCustom.value = status.custom.statusCode;
});
</script>

<style lang="less" scoped>
.resource-status-display {
  .status-card {
    text-align: center;
    padding: 8px;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    background: #fafafa;

    .status-label {
      font-size: 12px;
      color: #666;
      margin-bottom: 4px;
    }

    .status-value {
      .ant-tag {
        margin: 0;
      }
    }
  }

  .status-actions {
    margin-top: 16px;
    text-align: center;
  }

  .status-management-content {
    .status-options {
      padding: 16px 0;
      text-align: center;
    }
  }

  .history-item {
    .history-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;

      .history-type {
        font-weight: 500;
      }

      .history-time {
        color: #999;
        font-size: 12px;
      }
    }

    .history-content {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }

    .history-reason {
      color: #666;
      font-size: 12px;
    }
  }
}
</style>
